<template>
    <div>
      <van-nav-bar title="导入班级"
      v-if="windows==1"
      fixed
      @click-left="back()" 
      right-text="添加"
      @click-right="add()">
        <template #left>
          <van-icon name="arrow-left" size="18" />
        </template>
      </van-nav-bar>
          <van-collapse v-model="activeName" accordion>
  
            <el-button type="primary" class="add-btn" @click.prevent="add()">添加</el-button>
  <div v-for="user,userIndex in datas" :key="userIndex">
        <van-cell
        clickable
        :key="userIndex"
        :title="user.classname"
        @click="toggleCheckbox(user.id)"
      >
        <template #right-icon>
          <input type="checkbox" :id="'user_' + user.id" v-model="result" :value="user.id">
        </template>
      </van-cell>
      </div>
          </van-collapse>
  
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
      name: "SelectImportClass",
      data() {
      return {
        windows:1,
        // userId: "this.",
        result: [],
        value: "",
        activeName: ["1"],
        datas:[
        ],
        fin: 0,
        loading: false,
        finished: false,
        checked: true,
        activeIcon: "https://img01.yzcdn.cn/vant/user-active.png",
        inactiveIcon: "https://img01.yzcdn.cn/vant/user-inactive.png",
      };
    },
      mounted() {
        if (window.innerWidth < 768)  {
        this.windows = 1;
      }else {
        this.windows = 0;
    }
        console.log(this.$route.params.id);
        axios.post("/class/RemainingClass").then((response) => {
          // console.log(response.data);
          this.datas = response.data.data;
          // console.log(this.datas);
          // console.log(this.datas[0]);
          // console.log(this.datas[0].classname);
        //   console.log(this.datas);
        //   console.log(this.datas.user_id_list);
        //   console.log(this.datas.user_list[0].id);
        //   this.checks();
        });
      },
      methods: {
        
        checks() {
    // 在数据加载完成后，对于每个 user，如果其 user_id 在 user_id_list 中，则将其添加到结果列表中
      this.datas.user_list.forEach((user) => {
        if (this.datas.user_id_list.includes(user.id)) {
          // 如果 user_id 在 user_id_list 中，则将其添加到结果列表中
          if (!this.result.includes(user.id)) {
            this.result.push(user.id);
          }
        }
      }
    );
  },
  
  
      checkAll() {
        this.result = this.datas.user_list.map(user => user.id); // 全选
      },
      ReverseAll() {
        this.result = []; // 反选
      },
  
      add() {
        // console.log(this.result);
        // console.log(localStorage.getItem('userId'));
        axios.post("/course/import?courseId="+this.$route.params.id+"&userId="+localStorage.getItem('userId')+"&list="+this.result)
        .then((response)=>{
          if(response.data.code==200){
            this.$message.success("导入成功");
          }
          else{
            this.$message.error("导入失败");
          }
          this.$router.go(-1);
          location.reload();
        //   console.log(response);
        })
      },
  
      toggleCheckbox(userId) {
        // 根据用户ID切换复选框的选中状态
        const index = this.result.indexOf(userId);
        if (index !== -1) {
          this.result.splice(index, 1); // 取消选中
        } else {
          this.result.push(userId); // 选中
        }
      },
      // onSearch1() {
      //   console.log(this.value);
      // },
      // onSearch2() {
      //   console.log(this.value1, this.value2, this.value3);
      // },
      onLoad() {
        // 异步更新数据，setTimeout 仅做示例，真实场景中一般为 ajax 请求
        setTimeout(() => {
          for (let i = 0; i < 100; i++) {
            this.fin += 1;
  
          }
  
          // 加载状态结束
          this.loading = false;
      // 获取所有用户列表的长度
      let totalUserCount = 0;
      this.datas.user_list.forEach((item) => {
        totalUserCount += item.user_list.length;
      });
  
      // 检查是否加载完所有用户
      if (this.fin >= totalUserCount) {
        this.finished = true;
        // 执行其他相关的代码
      }
        }, 1000);
      },
        ToCreateCourse() {  
        this.$router.push('CreateCourse');  
      },
      back() {
    this.$router.go(-1);
  }
    
      },
      
  };
  </script>
  
  <style scoped>
  .blue-text {
    color: skyblue;
  }
  
  .red-text {
    color: rgb(116, 193, 0);
  }
  
  .search-btn {
    margin-left: 10%;
    margin-top: 10%;
    width: 80%;
    position: absolute;
    bottom: 20%;
  }
  
  .img-icon {
    height: 20px;
  }
  
  .flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* flex:1; */
  }
  
  .flex-item {
    flex: 1;
  }
  
  
  input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    transition: border-color 0.3s;
    cursor: pointer;
  }
  
  /* 复选框标记的样式 */
  input[type="checkbox"]:checked::before {
    content: "✔"; /* 选中后显示✔符号 */
    display: block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    color: white;
    border-radius: 50%; /* 使复选框变成圆形 */
    transition: border-color 0.3s;
    background-color: rgb(70, 175, 240); /* 选中后的背景色 */
    cursor: pointer;
  }
  
  input[type="checkbox"]:checked::after {
    display: none; /* 显示 ✔ 符号 */
  }


  .add-btn {
    width: 100%;
  }
  </style>